<script setup>
import {ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import {router} from "@/plugins/1.router/index.js";
import {getStudentList} from "@/api/student.js";
import showTost from "@/components/toast/index.js";
let route = useRoute()

const form = reactive({
    type:1,
    templateId:null,
  relevance:null,
  scoretemplate_id:null,
  studentId:null,
  score:null,
  content:null,
  obs:1,
  activeType:1,
  obId:null,
  group_id:null,
})
let list = ref([])
let total = ref(0)//总数
let queryFrom = ref({page: 1, limit: 8, title:''})

const getList = async () => {
  const {data} = await useApi('/teacher/Api.Mass/index').post({...queryFrom.value})
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.standardization_id
    }
  })
}
getList()

console.log(route.query.id)
if(route.query.id){
debugger
}
const getDetail = ()=>{

}
const page  =ref(1)
const search = () => {
  queryFrom.value.page = 1
  getList()
}
const goDetail = (val)=>{
  console.log('detail')
  router.push(`/community/communityDetail?mass_id=${val.mass_id}&title=${val.title}` )
}

const valid = ref(false)
const projectList = ref(['德', '智', '体', '美', '劳'])

const onHandleEditData = ()=>{

}

const drawaerDelete = ()=>{

}
const required = (value, name) => !!value || `${name}为必填字段`;

const radios = ref('one')
/**  获取学生列表*/
const studentList = ref([])
const getStudentListProp = async () => {
  getStudentList({page:1,limit:9999,grade_id:form.grade_id,class_id:form.class_id}).then(res=>{
    studentList.value = res.data.value.data
    console.log(studentList.value)
  })
}
getStudentListProp()
const onHandle = ()=>{
  router.push('/scoring/template')
}
const typeList = ref([{
  label: '手动输入',
  value: 1
},{
  label: '使用模板',
  value: 2
}])
const refVForm = ref()
const headerConfirm = async(val)=>{
  if(val == 'add'){
    const {data} = await useApi('/teacher/Api.OneKey/add').post(form)
    if(data.value.status){
      showTost('提交成功', {duration: 3000, type: 'success'})
      refVForm.value?.reset()
    }
  }
}
const activetypeList = ref([
  {
    title: '社团',
    value: 1
  },
  {
    title: '班级',
    value: 2
  },
  {
    title: '活动',
    value: 3
  },

])
/** 获取社团列表*/
const communityList = ref([])
const getCommunityList = async () => {
  const {data} = await useApi('/teacher/Api.Mass/index').post({page:1,limit:9999})
  if (data.value.status == 200) {
    communityList.value = data.value.data.data
  }
}
getCommunityList()
/** 获取活动列表结束*/

/** 获取班级列表开始*/
const classList = ref([])
const getClassList = async (id = '') => {
  console.log(id, 'id')
  console.log(form.grade_id)
  const {data} = await useApi('/teacher/Api.GradeClass/indexList').post({grade_id: id})
  if (data.value.status == 200) {
    console.log(data.value.data)
    classList.value = data.value.data
  }
}
getClassList()
/** 获取班级列表结束*/

/** 获取活动列表*/
const activeList = ref([])
const getActiveList = async () => {
  const {data} = await useApi('/teacher/Api.Active/index').post({page: 1, limit: 9999})
  if (data.value.status == 200) {
    activeList.value = data.value.data.data
  }
}
getActiveList()
/** 获取活动列表结束*/
/** 获取小组列表*/
const groupList = ref([])
const getGroupList = async () => {
  const {data} = await useApi('/teacher/Api.Group/index').post({page: 1, limit: 9999,mass_id:form.obId})
  if (data.value.status == 200) {
    groupList.value = data.value.data.data
  }
}
/** 获取活动列表结束*/

const communityChange = (val) =>{
  console.log(val)
  form.group_id = null
  nextTick(()=>{
    if(val) getGroupList()
  })
}
</script>

<template>
  <div class="content">
    <custom-header @onHandle="headerConfirm" title="一键打分" :show-delete="false" button-text="提交">
     <template v-slot:select>
       <div @click="onHandle"  class="examination-session border-radius-md" >
         模板管理
       </div>

     </template>

    </custom-header>
    <VForm
      style="background: #fff;padding: 30px 24px"
      v-model="valid"
      ref="refVForm"
    >
      <VRow>
        <VCol cols="6">
          <VSelect
            v-model="form.relevance"
            :items="projectList"
            item-title="item"
            item-value="item"
            :rules="[(val)=>required(val,'关联项目')]"
            class="input-width-height"
          >
            <template v-slot:label>
              <span>关联项目</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VSelect>
        </VCol>
        <VCol cols="6">
          <VSelect
            v-model="form.type"
            :items="typeList"
            item-title="label"
            item-value="value"
            :rules="[(val)=>required(val,'方式')]"
            class="input-width-height"
          >
            <template v-slot:label>
              <span>方式</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VSelect>
        </VCol>

        <VCol cols="6">
          <div :style="{borderColor:form.obs==1?'rgba(140, 87, 255, 1)':'rgba(46, 38, 61, 0.12)'}" class="checkout-box border-radius-md p-4">
            <v-radio-group v-model="form.obs">
              <v-radio  :value="1">
                <template v-slot:label>
                  <div style="margin-left: 5px;">
                    <div class="first-box"><i class="ri-user-5-line"></i> 学生</div>
                    <div class="second-box">具体的解释细节描述</div>
                  </div>
                </template>
              </v-radio>
            </v-radio-group>
            <img src="@/assets/score-person1.png" alt="">

          </div>
        </VCol>
        <VCol cols="6">
          <div :style="{borderColor:form.obs==2?'rgba(140, 87, 255, 1)':'rgba(46, 38, 61, 0.12)'}" class="checkout-box border-radius-md p-4">
            <v-radio-group v-model="form.obs">
              <v-radio  :value="2">
                <template v-slot:label>
                  <div style="margin-left: 5px;">
                    <div class="first-box"><i class="ri-user-2-line"></i> 小组</div>
                    <div class="second-box">具体的解释细节描述</div>
                  </div>
                </template>
              </v-radio>
            </v-radio-group>
            <img src="@/assets/score-person2.png" alt="">

          </div>
        </VCol>
        <VCol cols="6" v-if="form.obs == 1">
          <VAutocomplete
            v-model="form.studentId"
            :items="studentList"
            item-title="real_name"
            item-value="studentId"
            :rules="[(val)=>required(val,'学生姓名')]"
            class="input-width-height"
          >
            <template v-slot:label>
              <span>学生姓名</span>
              <span  style="color: red;margin-left: 4px;">*</span>
            </template>
          </VAutocomplete>
        </VCol>
        <VCol cols="6" v-if="form.obs == 1">
          <VTextField
            disabled
            v-model="form.studentId"
            label="学生ID"
            :rules="[(val)=>required(val,'学生ID')]"
          >
            <template v-slot:label>
              <span>学生ID</span>
            </template>
          </VTextField>
        </VCol>
        <template  v-if="form.obs == 2">
          <VCol cols="6">
            <VSelect
              v-model="form.activeType"
              :items="activetypeList"
              item-title="title"
              item-value="value"
              :rules="[(val)=>required(val,'活动类型')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>活动类型</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VSelect>
          </VCol>

          <VCol cols="6">
            <VAutocomplete
              v-if="form.activeType==1"
              @update:modelValue="communityChange"
              v-model="form.obId"
              :items="communityList"
              item-title="title"
              item-value="mass_id"
              :rules="[(val)=>required(val,'对应归属对象')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>社团名称</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="form.activeType==2"
              v-model="form.obId"
              :items="classList"
              item-title="gradeAndTitle"
              item-value="class_id"
              :rules="[(val)=>required(val,'对应归属对象')]"
            >
              <template v-slot:label>
                <span>班级</span>
                <span style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
            <VAutocomplete
              v-if="form.activeType==3"
              v-model="form.obId"
              :items="activeList"
              item-title="title"
              item-value="active_id"
              :rules="[(val)=>required(val,'对应归属对象')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>活动</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>

          </VCol>
          <VCol cols="6" v-if="form.activeType ==1">
            <VAutocomplete
              v-model="form.group_id"
              :items="groupList"
              item-title="title"
              item-value="group_id"
              :rules="[(val)=>required(val,'小组名称')]"
              class="input-width-height"
            >
              <template v-slot:label>
                <span>小组名称</span>
                <span  style="color: red;margin-left: 4px;">*</span>
              </template>
            </VAutocomplete>
          </VCol>
        </template>

        <VCol cols="6">
          <VTextField
            v-model="form.score"
            label="分数"
            :rules="[(val)=>required(val,'分数')]"
          >
            <template v-slot:label>
              <span>分数</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VTextField>
        </VCol>
        <VCol cols="12">
          <VTextarea
            type="textarea"
            v-model="form.content"
            label="得分内容"
            placeholder="请输入得分内容"
          >
          </VTextarea>
        </VCol>
      </VRow>
    </VForm>

  </div>
</template>



<style scoped lang="scss">
@use "@configured-variables" as variables;

.header-box {
  background-color: rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;

  .title {
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    .sub-title{
      font-size: 14px;
      color:rgba(46, 38, 61, 0.7);
    }
  }

  .tabs {
    margin-left: 30px;
    display: flex;
    align-items: center;

    .active {

      background-color: rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }

    .item {
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height: 38px;
      margin-right: 4px;
      cursor: pointer;

      > i {
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}
.search {
  display: flex;
  align-items: center;
  margin-left:auto !important;
  border-radius: 74px;
  inline-size: 291px;
  margin-inline-start: 40px;
  padding-block: 8px;
  padding-inline: 16px;
  margin-right: 20px;
  background-color: variables.$vertical-nav-background-color;

}
.examination-session{
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-button-grey-color));
  background: rgba(var(--v-theme-button-grey-bg));

}
.checkout-box{
  border-radius: 12px;
  height: 172px;
  display: flex;
  justify-content: space-between;
  border:1px solid rgba(46, 38, 61, 0.12);
  padding: 20px;
  img{
    //width:58px;
    height:141px;
  }
   .first-box{
     display: flex;
     align-items: center;
     font-family: PingFang SC;
     font-weight: 500;
     font-size: 15px;
     line-height: 22px;
     letter-spacing: 0px;
     vertical-align: middle;
     color: rgba(46, 38, 61, 0.9);
      i{
        margin-right:5px;
      }
   }
  .second-box{
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: rgba(46, 38, 61, 0.7);
  }
}
</style>
